<template>
	<el-container style="height: 550px; border: 1px solid #eee">
		<el-container>
			<el-main>
				<div>
					<el-button size="small" type="primary" @click="openScheduleJobDialog('create')">Create Job</el-button>
				</div>
				<div>
					<el-table :data="jobs" stripe border style="width: 100%">
						<el-table-column prop="id" label="ID" width="70" />
						<el-table-column prop="name" label="Name" width="110">
							<template #default="scope">
								<el-button type="text" @click="updateScheduleJob(scope)">{{scope.row.name}}</el-button>
							</template>
						</el-table-column>
						<el-table-column prop="cron" label="CRON" width="120" />
						<el-table-column prop="tasks" label="Tasks" width="350" />
						<el-table-column prop="status" label="Status" width="80" >
							<template #default="scope">
								{{jobStatus(scope.row.status)}}
							</template>
						</el-table-column>
						<el-table-column label="Operations">
							<template #default="scope">
								<span>
									<el-button size="mini" type="primary" @click="startJob(scope.row.id)" v-if = "scope.row.status == false">Start</el-button>
									<el-popconfirm
										confirm-button-text="Yes"
										cancel-button-text="No"
										:icon="InfoFilled"
										icon-color="red"
										title="Are you sure to stop this scheduled job?"
										@confirm="stopJob(scope.row.id)"
										@cancel="return"
										v-if = "scope.row.status == true"
									>
										<template #reference>
											<el-button size="mini" type="primary" >Stop</el-button>
										</template>
									</el-popconfirm>
									
									<el-button size="mini" type="primary" @click="viewResult(scope.row.message)">Logs</el-button>
									<!-- <el-button size="mini" type="primary">History</el-button> -->
									<el-popconfirm
										confirm-button-text="Yes"
										cancel-button-text="No"
										:icon="InfoFilled"
										icon-color="red"
										title="Are you sure to delete this scheduled job?"
										@confirm="removeJob(scope.row.id)"
										@cancel="return"
									>
										<template #reference>
											<el-button size="mini" type="danger">Delete</el-button>
										</template>
									</el-popconfirm>
								</span>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div align="left">
						<el-drawer v-model="this.jobResultViewer.openResultDrawer" title direction="ltr" size="75%">
							<div ref="resultViewer" align="center" class style="height: 100%; width: 100%">
								<el-input v-model="this.jobResultViewer.message" rows="50" type="textarea" readonly="true" />
							</div>
						</el-drawer>
					</div>
				<el-dialog title="Schedule Job" v-model="showScheduleJobDialog">
					<el-form :model="scheduleJob">
						<el-form-item label="Name" label-width="120px">
							<el-input v-model="scheduleJob.name" autocomplete="off" placeholder = "job name"></el-input>
						</el-form-item>
						<el-form-item label="CRON" label-width="120px">
							<el-input v-model="scheduleJob.cron" autocomplete="off" placeholder = "schedule plan in cron, for example '0 0/8 * * * *'"></el-input>
						</el-form-item>
						<el-form-item label="Tasks" label-width="120px">
							<el-input v-model="scheduleJob.tasks" autocomplete="off" placeholder = "test case URI under 'TestCase',use ',' to split multiple tc.xml tasks"></el-input>
						</el-form-item>
						<el-form-item label="Mails" label-width="120px">
							<el-input v-model="scheduleJob.mails" autocomplete="off" placeholder = "mails, use ',' to split multiple address"></el-input>
						</el-form-item>
					</el-form>
					<template #footer>
						<span class="dialog-footer">
							<el-button @click="showScheduleJobDialog = false">Cancle</el-button>
							<el-button type="primary" @click="createOrUpdateJob">Confirm</el-button>
						</span>
					</template>
				</el-dialog>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>

import { ElMessage } from 'element-plus';
import scheduleApi from '/@/api/cloudtest/schedule.ts';

export default {
	mounted() {
		this.loadAllJobs();
	},
	watch: {
	},

	computed:{
	},

	methods: {
		jobStatus(status){
			return status?'started':'stopped';
		},
		openScheduleJobDialog(operationType){

			if(operationType == 'create'){
				this.scheduleJob = {};
				this.scheduleJob.operationType = 'create';
			}else if(operationType == 'update'){
				this.scheduleJob.operationType = 'update';
			}
			this.showScheduleJobDialog = true;
		},
		createOrUpdateJob(){
			let promise = null;

			if(this.scheduleJob.operationType == 'create'){
				promise = scheduleApi.createJob(this.scheduleJob);
			}else if(this.scheduleJob.operationType == 'update'){
				promise = scheduleApi.updateJob(this.scheduleJob);
			}

			promise.then(response =>{
				if (response.status) {
					ElMessage.success({
						message: 'Operation Success',
						type: 'success',
					});

					this.showScheduleJobDialog = false;
					this.loadAllJobs();
				} else {
					ElMessage.error({
						message: 'Operation faild: caused by ' + response.message,
						type: 'error',
					});
				}
				
			}).catch(error =>{
				ElMessage.error({
						message: 'Operation faild: caused by ' + error,
						type: 'error',
					});
			});
		},

		loadAllJobs(){
			scheduleApi.getAllJobs().then(response =>{
				if (response.status) {
					this.jobs = response.data;
				} else {
					ElMessage.error({
						message: 'Operation faild: caused by ' + response.message,
						type: 'error',
					});
				}
				
			}).catch(error =>{
				ElMessage.error({
						message: 'Operation faild: caused by ' + error,
						type: 'error',
					});
			});
		},

		updateScheduleJob(scope){
			// alert(JSON.stringify(scope.row));
			this.scheduleJob = scope.row;
			this.openScheduleJobDialog('update');
		},
		removeJob(jobId){
			scheduleApi.removeJob(jobId).then(response =>{
				if (response.status) {
					ElMessage.success({
						message: 'Delete Job Success',
						type: 'success',
					});
					this.loadAllJobs();
				} else {
					ElMessage.error({
						message: 'Operation faild: caused by ' + response.message,
						type: 'error',
					});
				}
				
			}).catch(error =>{
				ElMessage.error({
						message: 'Operation faild: caused by ' + error,
						type: 'error',
					});
			});
		},
		startJob(jobId){
			scheduleApi.startJob(jobId).then(response =>{
				if (response.status) {
					ElMessage.success({
						message: 'Start Job Success',
						type: 'success',
					});
					this.loadAllJobs();
				} else {
					ElMessage.error({
						message: 'Operation faild: caused by ' + response.message,
						type: 'error',
					});
				}
				
			}).catch(error =>{
				ElMessage.error({
						message: 'Operation faild: caused by ' + error,
						type: 'error',
					});
			});
		},
		stopJob(jobId){
			scheduleApi.stopJob(jobId).then(response =>{
				if (response.status) {
					ElMessage.success({
						message: 'Stop Job Success',
						type: 'success',
					});
					this.loadAllJobs();
				} else {
					ElMessage.error({
						message: 'Operation faild: caused by ' + response.message,
						type: 'error',
					});
				}
				
			}).catch(error =>{
				ElMessage.error({
						message: 'Operation faild: caused by ' + error,
						type: 'error',
					});
			});
		},
		viewResult(message){
			this.jobResultViewer.openResultDrawer = true;
			this.jobResultViewer.message = message;
		},

	},		
	data() {
		return {
			showScheduleJobDialog: false,
			scheduleJob:{
				//id:1,
				name: "",
				cron: "",
				tasks: "",
				status: true,
				home: "",
				operationType:"",
			},
			jobs:[],
			jobResultViewer:{
				openResultDrawer: false,
				message:"",
			},
			
		};
	},
};
</script>
<style></style>
